<template>
  <el-container class="container" direction="horizontal" :style="{height: pageHeight}">
    <el-aside class="left_container">
      <!-- 账号名片 -->
      <mycard></mycard>
      <choice-card></choice-card>

      <!-- 回话列表 -->
      <div class="conversation_list_container">
        <router-view></router-view>
      </div>

      <!-- 底部导航 -->
      <left-footer></left-footer>
    </el-aside>
    <el-main class="right_container">
      <div class="right_top">
        <RightTopIcon></RightTopIcon>
        <RightTopContent></RightTopContent>
      </div>
    </el-main>
  </el-container>
</template>

<script>
  import {MAIN_PAGE_HEIGHT} from '../constant/index'
  import mycard from './card/myCard'
  import choiceCard from './card/choiceCard'
  import leftFooter from './card/leftFooter'
  import RightTopIcon from './card/RightTopIcon'
  import RightTopContent from './card/RightTopContent'

  export default {
    components: {
      mycard,
      choiceCard,
      leftFooter,
      RightTopIcon,
      RightTopContent
    },
    name: 'main.vue',
    data() {
      return {
        pageHeight: MAIN_PAGE_HEIGHT + 'px'
      }
    },
    mounted() {
      document.querySelector('body').setAttribute('style', 'margin:0px;padding: 0px;')
      // console.log('底部导航高为：' + document.getElementById('div').offsetHeight)
      // console.log('底部导航宽为：' + document.getElementById('div').offsetWidth)
    }
  }
</script>
<style scoped>
  .el-main {
    padding: 0px;
  }

  .left_container {
    width: 30%;
    background: #f2f2f2;
  }

  .right_container {
    width: 70%;
    background: #f6f6f6;
  }

  .right_top {
    height: 70px;
  }


</style>
